<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            margin: 0px auto;
            position: relative;
        }

        .box>div {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(211, 42, 220);
            box-sizing: border-box;
            background-image: url("pic.jpg");
            position: absolute;
            overflow: hidden;
            background-size: 600px 600px;
            transition: all .2s;
        }

        .box>div img {
            position: absolute;
            width: 600px;
            height: 600px;
        }

        .start {
            text-align: center;
            padding: 30px 0;
        }
    </style>
</head>

<body>
    <div class="start"><button>开始</button></div>
    <div class="box"></div>
    <script>
        var arr = [{
            x: 0,
            y: 0,
            left: 0,
            top: 0
        }, {
            x: -200,
            y: 0,
            left: 200,
            top: 0
        }, {
            x: -400,
            y: 0,
            left: 400,
            top: 0
        }, {
            x: 0,
            y: -200,
            left: 0,
            top: 200
        }, {
            x: -200,
            y: -200,
            left: 200,
            top: 200
        }, {
            x: -400,
            y: -200,
            left: 400,
            top: 200
        }, {
            x: 0,
            y: -400,
            left: 0,
            top: 400
        }, {
            x: -200,
            y: -400,
            left: 200,
            top: 400
        }, {
            x: -400,
            y: -400,
            left: 400,
            top: 400
        }];
        var box = document.querySelector(".box");
        for (var i = 0; i < arr.length; i++) {
            var div = document.createElement("div");
            var img = document.createElement('img');
            img.draggable = false;
            img.src = './pic.jpg';
            div.style.left = arr[i].x + "px";
            div.style.top = arr[i].y + "px";
            div.appendChild(img);

            div.style.left = arr[i].left + "px";
            div.style.top = arr[i].top + "px";
            box.appendChild(div);
        }
        // 获取按钮标签  添加点击事件  点击开始按钮 设置.box中div 根据arr数组得位置进行新的排序
        // 获取arr1作为一组0-arr.length-1的随机数不重复(用来做div新的排序顺序)
        // 根据新的数组arr1中元素找到arr中数据对div进行新的排序
        // 将开始按钮内容更改为恢复
        // 再次恢复来使用arr正常顺序重新定义div位置,回复正常排序
        // 获取所有.box下的div,设置允许拖拽.给每个div添加开始拖拽和结束拖拽
        // 在开始拖拽中记录被拖拽的元素的索引值,以及被拖拽元素当前所在位置的索引值; 
        // 在结束拖拽中,找到结束元素的索引值与结束元素所在位置索引值
        // 设置两个标签根据位置索引值得到的位置进行交换位置

        var but = document.querySelector('button');
        var divs = document.querySelectorAll('.box > div');
        var arr1 = [];
        // 设置一个变量记录button点击的次数
        var cont = 0;
        but.onclick = function () {
            // 记录次数
            cont++;
            // 根据点击次数判断是偶数次数执行的代码与奇数次数执行的不一样
            if (cont % 2 == 0) {
                but.innerHTML = "开始";
                // 循环获取到每个div，让div按照顺序找到arr中的偏移量，进行按顺序排序
                for (var k = 0; k < divs.length; k++) {
                    divs[k].draggable = false;
                    divs[k].style.left = arr[k].left + "px";
                    divs[k].style.top = arr[k].top + "px";
                }
                // 如果这个if内代码执行，则结束整个函数代码的执行
                return;
            }

            for (var i = 0; i < 1000; i++) {
                // 获取一个零到八之间的随机数
                var num = Math.floor(Math.random() * arr.length);
                // 判断如果arr1中没有这个值，就进行添加
                if (arr1.indexOf(num) < 0) arr1.push(num);
                // 每次添加新值，就判断一下 arr1的长度够不够 够了就跳出循环
                if (arr1.length == arr.length) break;

            }
            // 得到新的排序顺序
            console.log(arr1);
            // 获取一个0---8的数（要获取每个div标签 以及每个arr1内的内容）
            for (var k = 0; k < divs.length; k++) {
                // 分别给每个div设置新的位置 在arr中根据arr1中打乱的索引值找到移动偏移量 设置给div
                divs[k].draggable = true;
                divs[k].style.left = arr[arr1[k]].left + "px";
                divs[k].style.top = arr[arr1[k]].top + "px";
            }
            but.innerHTML = "恢复";
        }
        // 3.获取每个div开始拖拽和结束拖拽事件
        for (var j = 0; j < divs.length; j++) {
            // 4.给每个标签添加一个自定义属性 值是当前标签的索引值
            divs[j].index = j;
            divs[j].addEventListener("dragstart", function (e) {
                // e.target被拖拽的标签
                // e.target.index 被拖拽的标签的索引值
                // console.log("开始拖拽了",e.target.index);
                e.dataTransfer.setData("startIndex", e.target.index)
            })
            // drop事件的不执行 需要先在ondragover事件中阻止默认事件
            divs[j].ondragover = function (e) {
                e.preventDefault()
            }
            divs[j].addEventListener("drop", function (e) {

                // e.target松开时鼠标所在的标签  img
                // e.target.parentNode 找到img的父标签
                // e.target.parentNode.index 松开时鼠标所在的div标签的索引值  
                // console.log("拖拽松开了",e.target.parentNode.index); //在那个标签上松开的 
                var n = e.target.parentNode.index;

                // 获取的 被拖拽的标签的索引值
                var m = e.dataTransfer.getData("startIndex");
                // console.log(m);
                // 被拖拽的标签的位置
                var obj1 = {}
                obj1.l = divs[m].style.left;
                obj1.t = divs[m].style.top;
                // 松开时获取到标签的位置
                var obj2 = {};
                obj2.l = divs[n].style.left;
                obj2.t = divs[n].style.top;
                console.log(obj1);
                console.log(obj2);
                // 设置两个div互换位置
                divs[m].style.left = obj2.l;
                divs[m].style.top = obj2.t;
                divs[n].style.left = obj1.l;
                divs[n].style.top = obj1.t;

                var num1 = arr1[n];
                arr1[n] = arr1[m];
                arr1[m] = num1;
                // console.log(arr1);
                var str = arr1.join("");
                console.log(str);
                if (str === "012345678") {
                    cont++;
                    arr1 = []
                    but.innerHTML = "开始";
                    alert("成功了");
                }


            })
        }
    </script>
</body>

</html>